<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/modules/layui/css/layui.css">
  <link rel="stylesheet" href="../css/userpub.css">
  <link href="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.12/cropper.min.css" rel="stylesheet">
</head>

<body>
  <div class="layui-card">
    <div class="layui-card-header">卡片面板</div>
    <div class="layui-card-body">
      <form class="layui-form" id="form-pub">
        <div class="layui-form-item">
          <label class="layui-form-label">文章标题</label>
          <div class="layui-input-block">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off"
              class="layui-input">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">文章类别</label>
          <div class="layui-input-block">
            <select name="cate_id" lay-verify="">
            </select>
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">文章内容</label>
          <div class="layui-input-block" style="height: 400px;">
            <!-- 重要：将来这个textarea会被初始化富文本编辑器 -->
            <textarea name="content" id="tinymceEditer"></textarea>
          </div>
        </div>
        <!-- 头像区域 -->
        <div class="layui-form-item">
          <!-- 左侧的lable -->
          <label class="layui-form-label">文章封面</label>
          <!-- 选择封面区域 -->
          <div class="layui-input-block cover-box">
            <!-- 左侧裁剪区域 -->
            <div class="cover-left">
              <img id="image" src="../img/baiduwenk.png" alt="">
            </div>
            <!-- 右侧预览区域和选择封面区域 -->
            <div class="cover-right">
              <!-- 预览区域 -->
              <div class="img-preview"></div>
              <!-- 选择封面区域 -->
              <button type="button" class="layui-btn layui-btn-danger" id="btnChooseImage">选择封面</button>
              <!-- 隐藏的文件选择框 -->
              <input type="file" id="coverFile" style="display: none;" accept="image/png,image/jpeg,image/gif">
            </div>
          </div>
        </div>
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit id="btnSave1">立即发布</button>
          <button class="layui-btn layui-btn-primary" id="btnSave2" lay-submit>存为草稿</button>
        </div>
      </form>
      <script type="text/html" id="tpl-cate">
        {{each data}}
        <option value="">请选择文章类别</option>
        <option value="{{$value.Id}}">{{$value.name}}</option>
        {{/each}}
      </script>
    </div>
  </div>
</body>
<script src="../css/modules/layui/layui.js"></script>
<script src="../js/modules/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.min.js"></script>
<script src="../js/baseAPI.js"></script>
<script src="../js/utils.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-cropper/1.0.1/jquery-cropper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/tinymce/5.8.2/tinymce.min.js"></script>

<script src="../js/userpub.js"></script>

</html>